/** 创建工作 */
<template>
  <div>
    <!-- for循环 -->
    <!-- v-for="(item, idx) in formHistory" :key="idx" -->
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
        style="text-align: center; font-weight: bolder"
      >
        <el-page-header @back="goBack">
          <span slot="content" style="position: absolute; left: 50%"
            >创建工作</span
          >
        </el-page-header>
      </div>
      <el-form
        ref="form"
        :rules="FormRules"
        :model="form"
        label-width="auto"
        label-suffix=":"
        style="width: 80%; margin: 0 auto"
      >
        <el-form-item label="工作项名称" prop="jobName">
          <el-input
            v-model="form.jobName"
            placeholder="请输入工作项名称"
          ></el-input
        ></el-form-item>
        <el-form-item label="任务描述" prop="jobContent">
          <el-input
            v-model="form.jobContent"
            placeholder="请输入任务描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="任务负责人" prop="principalId">
          <el-row justify="space-around">
            <el-col :span="6">
              <el-select
                ref="optionRef"
                v-model="form.principalId"
                placeholder="请选择principal"
                @change="principalSelection"
              >
                <el-option v-for="(item, index) in principalList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-col>
            <el-col :span="9">
              <el-form-item label="开始时间" label-width="110px" prop="beginDate">
                <el-date-picker
                  v-model="form.beginDate"
                  value-format="yyyy-MM-dd HH:mm"
                  type="date"
                  :picker-options="stratPickerOptions"
                  placeholder="计划开始时间"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="完成时间" prop="planOverDate">
                <el-date-picker
                  type="date"
                  :picker-options="endPickerOptions"
                  placeholder="选择日期"
                  v-model="form.planOverDate"
                  value-format="yyyy-MM-dd HH:mm"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="定期督办">
          <el-radio-group v-model="form.errorType">
            <el-radio :label="1">时</el-radio>
            <el-radio :label="2">天</el-radio>
            <el-radio :label="3">周</el-radio>
            <!-- <el-radio v-for="(item, index) of selectList" :key="index" :label="item.value">{{ item.label }}</el-radio> -->
          </el-radio-group>
          <span class="errorTypeInput" v-show="form.errorType == 1">
            每隔
            <el-input-number
              size="mini"
              v-model="errorHour"
              :controls="false"
              :min="1"
              :max="99"
              style="width: 50px"
            ></el-input-number>
            小时发送提醒
          </span>
          <span class="errorTypeInput" v-show="form.errorType == 2">
            每隔
            <el-input-number
              size="mini"
              v-model="errorDay"
              :controls="false"
              :min="1"
              :max="99"
              style="width: 50px"
            ></el-input-number>
            天，在
            <el-input-number
              size="mini"
              v-model="errorHour"
              :controls="false"
              :min="0"
              :max="23"
              style="width: 50px"
            ></el-input-number>
            点钟发送提醒
          </span>
          <span class="errorTypeInput" v-show="form.errorType == 3">
            每隔
            <el-input-number
              size="mini"
              v-model="errorWeek"
              :controls="false"
              :min="1"
              :max="99"
              style="width: 50px"
            ></el-input-number>
            周，在周
            <el-input-number
              size="mini"
              v-model="errorDay"
              :controls="false"
              :min="1"
              :max="5"
              style="width: 50px"
            ></el-input-number>
            的
            <el-input-number
              size="mini"
              v-model="errorHour"
              :controls="false"
              :min="0"
              :max="23"
              style="width: 50px"
            ></el-input-number>
            点钟发送提醒
          </span>
        </el-form-item>
        <el-form-item label="定期督办">
          <span class="foneSizeClolor">距离完成时间</span>
          <!-- <el-input @input="numInput" v-model="form.finishTime" maxlength="3" size="mini" style="width: 50px;"></el-input>  -->
          <el-input-number
            size="mini"
            v-model="form.errorDay"
            :controls="false"
            :max="99"
            style="width: 50px"
          ></el-input-number>
          <span class="foneSizeClolor">天时报警，展示到“红灯区模块”</span>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button> -->
          <!-- 删除 -->
          <!-- <i class="el-icon-delete"  @click="del(index)"></i> -->
          <!-- <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            placement="top-start"
          >
            <el-button
              type="danger"
              style="float: right"
              icon="el-icon-delete"
              circle
              @click="del(idx)"
            ></el-button>
          </el-tooltip> -->
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 添加 -->
    <!-- <el-button type="primary" icon="el-icon-plus"  @click="addCard" style="width: 100%; margin-top: 20px">插入任务</el-button> -->
    <!-- 保存及发布按钮-->
    <el-row class="end">
      <!-- <el-button type="info" size="small" @click="onSubmit">保存工作</el-button> -->
      <el-button type="primary" size="small" @click="setWork"
        >发布工作</el-button
      >
    </el-row>
  </div>
</template>

  <script>
  // 引入时间函数
import utils from "@/utils/util";
import * as calculateTimePoint from "@/utils/calculateTimePoint.js"
import { createInfoCreateGroupAPI } from "../api/user.js";
export default {
  name: "CreateWork",
  data() {
    return {
      idx: 0,
      stratPickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < new Date().setDate(new Date().getDate() - 1);
        }
      },
      endPickerOptions: {
        disabledDate: (time) => {
          if(!this.form.beginDate) {
            return false
          }
          return time.getTime() < new Date(this.form.beginDate).getTime()
        }
      },
      // 当前的表单数据
      form: {
        jobName: "", // 工作名称
        jobContent: "", // 任务描述
        beginDate: "",    // 计划开始时间
        planOverDate: "", // 计划完成时间
        principalId: "", // 任务负责人id principalName
        errorType: 1, // 定期督办类型
        errorDay: "1", // 预警时限
      },
      // 定期督办要计算时间的参数
      errorHour: 0,
      errorDay: 1,
      errorWeek: 1,
      principalList: [{
        label: "沈华洲",
        value : "18926090104"
      },{
        label: "文达",
        value : "wenda@csg.cn"
      },{
        label: "郭睿哲",
        value : "guorz@csg.cn"
      }],
      principalName: "",
      // 表单校验
      FormRules: {
        jobName: [
          { required: true, message: "请输入工作项名称", trigger: "blur" },
        ],
        jobContent: [
          { required: true, message: "请选择任务描述", trigger: "blur" },
        ],
        principalId: [
          { required: true, message: "请选择任务负责人", trigger: "blur" },
        ],
        beginDate: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
        planOverDate: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
        principalId: [
          { required: true, message: "请选择部门", trigger: "blur" },
        ],
      },
      // formHistory: [{
      //   workname: "",
      //     endTime: "",
      //     type: [],
      //     desc: "",
      //     finishTime:0
      //   }]  // 用于保存历史数据
    };
  },
  watch: {
    'form.beginDate'(newVal) {
      this.form.planOverDate = '';
      if(newVal) {
        this.endPickerOptions.disabledDate = (time) => {
          return time.getTime() < new Date(newVal).getTime();
        } 
      } else {
        this.endPickerOptions.disabledDate = (time) => {
          return false
        }
      }
    },
    deep: true
  },
  methods: {
    // 返回
    goBack() {
      this.$router.back();
    },
    onSubmit() {
      console.log("submit!");
    },
    addCard() {
      this.formHistory.push({ ...this.form });
      this.$message({
        message: "成功插入一条数据",
        type: "success",
      });
      this.idx++;
      // 清空当前form数据
      this.form = {
        workname: "",
        endTime: "",
        type: [],
        desc: "",
        finishTime: 0,
      };
    },
    // 删除
    del(idx) {
      console.log(idx);
      this.idx = idx;
      if (idx == 0 && this.formHistory.length === 1) {
        this.$message({
          message: "只有一条数据,不能删除!!!",
          type: "warning",
        });
      } else {
        //删除一条数据
        this.formHistory.splice(idx, 1);
      }
    },
    numInput(e) {
      console.log(e);
    },
    principalSelection(e) {
      this.$nextTick(() => {
        this.principalName = this.$refs.optionRef.selected.label;
        // console.log(this.principalName);
      })
    },
    // 发布
    setWork() {
      // // 两个数组
      // console.log(this.formHistory);
      // //bus传值 =====> 注意把异步改成同步
      // setTimeout(() => {
      //   this.$bus.$emit("getFormDataAll", [...this.formHistory]);
      // }, 0);
      // //页面跳转
      // this.$router.push({
      //   name: "WorkBoard",
      // });
      // this.$message({
      //   message: "发布工作数据成功",
      //   type: "success",
      // });
      let time = "";
      let interval = ""
      switch (this.form.errorType) {
        case 1:
          time = calculateTimePoint.getNextTimePointHour(this.errorHour);
          interval = this.errorHour;
          break;
        case 2:
          time = calculateTimePoint.getNextTimePointDay(
            this.errorDay,
            this.errorHour,
            new Date()
          );
          interval = this.errorDay;
          break;
        case 3:
          time = calculateTimePoint.getNextTimePointWeek(this.errorWeek, this.errorDay, this.errorHour, new Date());
          interval = this.errorWeek
          break;
        default:
          break;
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log("校验成功!!!");
          console.log(this.form);
          let data = {
            ...this.form,
            principalName: this.principalName,
            createName: "沈华洲",
            creatorId: "18926090104",
            nextDate: utils.Dateformat(time,"yyyy-MM-dd HH:mm"),
            interval,
            jobState: 3
          };
          console.log("最终的", data);
          createInfoCreateGroupAPI(data)
            .then((res) => {
              console.log(res);
              this.$message.success("创建成功")
              this.goBack()
            })
            .catch((fail) => {
              console.log(fail);
            });
          //bus传值 =====> 注意把异步改成同步
          // this.$nextTick(() => {
          //   this.$bus.$emit('getFormData', {...this.form});
          // });

          // //页面跳转
          // this.$router.push({
          // name: 'WorkBoard',
          // });
          // this.$message({
          // message: '成功发布了一条工作数据',
          // type: 'success'
          // });
        }
      });
    },
  },
};
</script>

  <style scoped lang="less">
.body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.box-card {
  margin-top: 10px;
}

.foneSizeClolor {
  color: #2b6df2;
}

.end {
  margin-top: 50px;
  display: flex;
  justify-content: flex-end;
}
</style>

<!--

  data() {
  return {
    index: 1,
    form: {
      name: "",
      date1: "",
      type: [],
      desc: "",
      finishTime: 0
    },
    formHistory: []  // 用于保存历史数据
  };
},
methods: {
  onSubmit() {
    console.log("submit!");
  },
  addCard() {
    // 将当前form数据添加到formHistory数组中
    this.formHistory.push({...this.form});

    // 显示消息
    this.$message({
      message: '成功插入一条数据',
      type: 'success'
    });

    // 清空当前form数据
    this.form = {
      name: "",
      date1: "",
      type: [],
      desc: "",
      finishTime: 0
    };

    // 增加index
    this.index++;
  }
}

查看全部
 -->
